<template>
  <div class="page">
    <c-title :hide="false" text="线上大药房"></c-title>
    <sjrz :name="'大药房连锁'"></sjrz>
    <div class="top">
      <div class="topsp">
        <van-search v-model="sousu" placeholder="搜索框(产品或店铺)" input-align="center" />
      </div>
      <div class="toplanmu">
        <div v-for="(item, index) in goodList" :key="index" class="goodList"  @click="tiaozhuan(item.id)">
          <img :src="item.thumb" alt="" /><br>
          {{item.name}}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="b">
        <div class="yhj">
          <div class="yhclass">
            <div class="yhclass">
              <img src="../../assets/images/goods/yhj.jpg" alt="" @click="seturl" />
            </div>
          </div>
        </div>

        <van-row class="img">
          <van-col span="8" v-for="(item, index) in tjList" :key="index"> <img :src="item.thumb" alt="" /></van-col>
        </van-row>
        <div v-if="hdList.length != 0">
          <!-- 活动专区 -->
          <img src="../../assets/images/goods/hd.jpg" alt="" class="tpclass" />
        </div>
      </div>
      <div class="bottom">
        <h1 class="h1class">附近商家</h1>
        <div class="list">
          <div v-for="(item, index) in sjList" :key="index" class="pric" @click="chakan(item.id)">
            <div class="sjtop">
              <div class="pic">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="shuju">
                <div class="name">
                  <p>{{ item.store_name }}</p>
                  
                </div>
                <div class="address">
                  {{ item.address.province + "" + item.address.district }}
                </div>
                <div class="dispath">
                 ( {{ item.dispatch}})
                </div>
              </div>
            </div>

            <van-row>
				<div class="imglist">
					<van-col span="6" v-for="(goods, index) in item.recommend_goods" :key="index" class="goods"
					  ><img :src="goods.thumb" /><br />
					  <!-- <div class="text"> {{ goods.title }}<br/>{{ goods.price }}  </div> -->
					</van-col>
				
				</div>
           
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
 import sjrz from "components/sjrz";
  export default {
    components: {
      sjrz
    },
  data() {
    return {
      sousu: null, //搜索
      goodList: [], //栏目List
      tjList: [], //特价产品
      hdList: [], //活动产品
      youhuiList: {},
      id: 0,
      getsjList: {
        lat: 0,
        lng: 0,
        city_name: null,
        page: 0,
        category_id: null,
        is_aggregation: 1
      },
      sjList: [],
      category_id: 0
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 3) {
        return value.slice(0, 3) + "...";
      }
      return value;
    }
  },
  activated() {
    this.getsj();
    this.getList(); //获取所有数据
    this.gettjList(); //获取特价商品
    this.gethdList(); //活动中心
    this.getyhj(); //获取优惠卷
  },
  methods: {
    tiaozhuan(id){
      this.$router.push(this.fun.getUrl("newCatelist",{id}));

    },
    chakan(id) {
      this.$router.push(
        this.fun.getUrl("o2oStore_v2", {
          store_id: id
        })
      );
    },
    seturl() {
      this.$router.push(this.fun.getUrl("coupon"));
    },
    getsj() {
      this.fun.getLocation().then(res => {
        this.getsjList.lat = res.point.lat;
        this.getsjList.lng = res.point.lng;
        this.getsjList.city_name = res.city;
        if (this.getsjList) {
          this.getmdList();
        }
      });
    },
    getList() {
      $http.post("plugin.store-cashier.frontend.store.pharmacy.get-Classes").then(response => {
        this.goodList = response.data;
      });
    },
    gettjList() {
      $http //特价
        .post("plugin.store-cashier.frontend.store.pharmacy.discount-goods", {
          category_id: 11
        })
        .then(response => {
          this.tjList = response.data;
        });
    },
    gethdList() {
      $http //活动
        .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
          category_id: 9
        })
        .then(response => {
          this.hdList = response.json[0];
        });
    },
    getyhj() {
      $http //优惠卷
        .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
          category_id: 8
        })
        .then(response => {
          this.youhuiList = response.json[0];
          console.log(this.youhuiList);
        });
    },

    // 获取商家列表
    getmdList() {
      console.log(this.getsjList.lng);
      $http
        .post("plugin.store-cashier.frontend.store.pharmacy.get-store-list-to-page", {
          lng: this.getsjList.lng,
          lat: this.getsjList.lat,
          cat_name: this.getsjList.city_name,
          page: 0,
          category_id: 11,
          is_aggregation: 1
        })
        .then(response => {
          this.sjList = response.data.data;
          console.log(this.sjList);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.page {
  .h1class {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  .top {
    .topsp {
    }
    .toplanmu {
      margin-top: 1rem;
      width: 100%;
      display: flex;
      align-content: flex-start;
      flex-flow: row wrap;
      .goodList {
        flex: 20%;
        img {
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
        }
      }
    }
  }
 
  .imglist{
	  display: flex;
	  justify-content: space-between;
	  padding: 0.5rem;
	  flex-wrap: wrap;
	  margin-bottom: 0.5rem;
	  .goods {
	  	width: 33%;
	    img {
	      width: 6rem;
	      height: 6rem;
	    }
	    .text {
	      font-size: 0.3rem;
	    }
	  }
  }
 
  .content {
    .img {
      img {
        width: 90%;
        height: 5rem;
        margin-bottom: 1rem;
      }
    }

    .b {
      .yhclass {
        display: inline-block;
        display: flex;
        margin-bottom: 0.5rem;
        .lqyhclass {
          margin-bottom: 1rem;
        }
        .btn {
          display: flex;
          background: #1989fa;
          color: #fff;
          height: 1.4rem;
          text-align: center;
          margin-left: 2rem;
          margin-top: 1.5rem;
        }
      }
      .yhj {
        img {
          display: flex;
          width: 100%;
          margin-top: 1rem;
        }
      }
    }
  }
  .tpclass {
    width: 100%;
    height: 6rem;
  }
  .bottom {
    background: #fff;
    .list {
      margin-bottom: 1rem;
      .pric {
        margin-bottom: 1rem;
      }
      .sjtop {
        display: flex;
		padding: 0.5rem;
        .pic {
          img {
            width: 3rem;
            height: 3rem;
          }
        }
        .shuju {
			display: flex;
          .name {
       
            font-size: 0.5rem;
               margin-left: 1rem;
			   background-color: #169BD5;
			   color: #fff;
			   line-height: 1rem;
			   height: 1.2rem;
			   border-radius: 0.5rem;
			   padding: 0 0.2rem;
            p{
              text-align: center;
            }
          }
          .address {
            margin-left: 0.2rem;
          }
          .dispath {
             margin-left:0.2rem;
             // background-color: orange;
             // color: #000;
			 // color: orange;
             border-radius: 0.3rem;
            // margin-right: 7rem;
          }
        }
      }
    }
  }
}
</style>